<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <title>React-admin - {{ page.title }}</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="{{ page.description }}">
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/syntax.css">
    <link rel="stylesheet" href="css/prism.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
</head>

<body>
    <div class="book with-summary font-size-2 font-family-1">
        <div id="book-summary" class="book-summary">
            <nav role="navigation">
                <ul class="summary">
                    <li class="header">Table of Contents</li>
                    <li class="chapter {% if page.path == 'index.md' %}active{% endif %}">
                        <a href="./index.html">
                            <b>1.</b> Read Me
                        </a>
                    </li>
                    <li class="chapter {% if page.path == 'Tutorial.md' %}active{% endif %}">
                        <a href="./Tutorial.html">
                            <b>2.</b> Tutorial
                        </a>
                        <ul class="articles" {% if page.path !='Tutorial.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#setting-up">Setting Up</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-an-api-as-data-source">Data Source API</a>
                            </li>
                            <li class="chapter">
                                <a href="#making-contact-with-the-api-using-a-data-provider">Data Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#mapping-api-endpoints-with-resources">Resources</a>
                            </li>
                            <li class="chapter">
                                <a href="#selecting-columns">Selecting Columns</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-field-types">Field Types</a>
                            </li>
                            <li class="chapter">
                                <a href="#customizing-styles">Custom Styles</a>
                            </li>
                            <li class="chapter">
                                <a href="#handling-relationships">Relationships</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-creation-and-editing-capabilities">Creation and Editing</a>
                            </li>
                            <li class="chapter">
                                <a href="#optimistic-rendering-and-undo">Undo</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-search-and-filters-to-the-list">Filters</a>
                            </li>
                            <li class="chapter">
                                <a href="#customizing-the-menu-icons">Menu Icons</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-home-page">Custom Home Page</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-a-login-page">Login Page</a>
                            </li>
                            <li class="chapter">
                                <a href="#supporting-mobile-devices">Responsive List</a>
                            </li>
                            <li class="chapter">
                                <a href="#connecting-to-a-real-api">Connecting To A Real API</a>
                            </li>
                            <li class="chapter">
                                <a href="#conclusion">Conclusion</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'DataProviders.md' %}active{% endif %}">
                        <a href="./DataProviders.html">
                            <b>3.</b> Data Providers
                        </a>
                        <ul class="articles" {% if page.path !='DataProviders.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#available-providers">Available Providers</a>
                            </li>
                            <li class="chapter">
                                <a href="#usage">Usage</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-custom-headers">Adding Custom Headers</a>
                            </li>
                            <li class="chapter">
                                <a href="#decorating-your-data-provider-example-of-file-upload">Decorating a Data
                                    Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#writing-your-own-data-provider">Writing Your Own Data Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#request-format">Request Format</a>
                            </li>
                            <li class="chapter">
                                <a href="#example-request-processing">Example Request Processing</a>
                            </li>
                            <li class="chapter">
                                <a href="#response-format">Response Format</a>
                            </li>
                            <li class="chapter">
                                <a href="#example-response-processing">Example Response Processing</a>
                            </li>
                            <li class="chapter">
                                <a href="#error-format">Error Format</a>
                            </li>
                            <li class="chapter">
                                <a href="#example-implementation">Example Implementation</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Admin.md' %}active{% endif %}">
                        <a href="./Admin.html">
                            <b>4.</b>
                            <code>&lt;Admin&gt;</code>
                        </a>
                        <ul class="articles" {% if page.path !='Admin.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#applayout">
                                    <code>appLayout</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#authprovider">
                                    <code>authProvider</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#catchall">
                                    <code>catchAll</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#customreducers">
                                    <code>customReducers</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#customroutes">
                                    <code>customRoutes</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#customsagas">
                                    <code>customSagas</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#dashboard">
                                    <code>dashboard</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#dataprovider">
                                    <code>dataProvider</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#initialstate">
                                    <code>initialState</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#internationalization">
                                    <code>locale</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#loginpage">
                                    <code>loginPage</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#logoutbutton">
                                    <code>logoutButton</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#menu">
                                    <code>menu</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#internationalization">
                                    <code>messages</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#theme">
                                    <code>theme</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#title">
                                    <code>title</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#using-react-admin-without-admin-and-resource">Not using
                                    <code>&lt;Admin&gt;</code> and
                                    <code>&lt;Resource&gt;</code>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Resource.md' %}active{% endif %}">
                        <a href="./Resource.html">
                            <b>5.</b>
                            <code>&lt;Resource&gt;</code>
                        </a>
                        <ul class="articles" {% if page.path !='Resource.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#name">
                                    <code>name</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#icon">
                                    <code>icon</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#options">
                                    <code>options</code>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'List.md' %}active{% endif %}">
                        <a href="./List.html">
                            <b>6.</b>
                            <code>&lt;List&gt;</code> View
                        </a>
                        <ul class="articles" {% if page.path !='List.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#the-list-component">
                                    <code>&lt;List&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-listguesser-component">
                                    <code>&lt;ListGuesser&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-datagrid-component">
                                    <code>&lt;Datagrid&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-simplelist-component">
                                    <code>&lt;SimpleList&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-singlefieldlist-component">
                                    <code>&lt;SingleFieldList&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-iterator">Using a Custom Iterator</a>
                            </li>
                            <li class="chapter">
                                <a href="#displaying-fields-depending-on-the-user-permissions">User permissions</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Show.md' %}active{% endif %}">
                        <a href="./Show.html">
                            <b>7.</b>
                            <code>&lt;Show&gt;</code> View
                        </a>
                        <ul class="articles" {% if page.path !='Show.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#the-show-component">
                                    <code>&lt;Show&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#page-title">Page Title</a>
                            </li>
                            <li class="chapter">
                                <a href="#actions">Actions</a>
                            </li>
                            <li class="chapter">
                                <a href="#the-showguesser-component">
                                    <code>&lt;ShowGuesser&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-simpleshowlayout-component">
                                    <code>&lt;SimpleShowLayout&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-tabbedshowlayout-component">
                                    <code>&lt;TabbedShowLayout&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#displaying-fields-depending-on-the-user-permissions">User permissions</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Fields.md' %}active{% endif %}">
                        <a href="./Fields.html">
                            <b>8.</b>
                            <code>&lt;Field&gt;</code> Components
                        </a>
                        <ul class="articles" {% if page.path !='Fields.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#arrayfield">
                                    <code>&lt;ArrayField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#booleanfield">
                                    <code>&lt;BooleanField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#chipfield">
                                    <code>&lt;ChipField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#datefield">
                                    <code>&lt;DateField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#emailfield">
                                    <code>&lt;EmailField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#filefield">
                                    <code>&lt;FileField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#imagefield">
                                    <code>&lt;ImageField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#functionfield">
                                    <code>&lt;FunctionField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#numberfield">
                                    <code>&lt;NumberField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#selectfield">
                                    <code>&lt;SelectField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#referencefield">
                                    <code>&lt;ReferenceField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#referencemanyfield">
                                    <code>&lt;ReferenceManyField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#referencearrayfield">
                                    <code>&lt;ReferenceArrayField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#richtextfield">
                                    <code>&lt;RichTextField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#textfield">
                                    <code>&lt;TextField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#urlfield">
                                    <code>&lt;UrlField&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#styling-fields">Styling Fields</a>
                            </li>
                            <li class="chapter">
                                <a href="#writing-your-own-field-component">Writing your own field component</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-label-to-custom-field-components-in-the-show-view">Adding Label To
                                    Custom Fields</a>
                            </li>
                            <li class="chapter">
                                <a href="#hiding-a-field-based-on-the-value-of-another">Conditional Field</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'CreateEdit.md' %}active{% endif %}">
                        <a href="./CreateEdit.html">
                            <b>9.</b>
                            <code>&lt;Create&gt;</code> and
                            <code>&lt;Edit&gt;</code> Views
                        </a>
                        <ul class="articles" {% if page.path !='CreateEdit.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#the-create-and-edit-components">
                                    <code>&lt;Create&gt;</code>,
                                    <code>&lt;Edit&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#page-title">Page Title</a>
                            </li>
                            <li class="chapter">
                                <a href="#actions">Actions</a>
                            </li>
                            <li class="chapter">
                                <a href="#prefilling-a-create-record">
                                    Prefilling a
                                    <code>&lt;Create&gt;</code> Record
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-editguesser-component">
                                    <code>&lt;EditGuesser&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-simpleform-component">
                                    <code>&lt;SimpleForm&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#the-tabbedform-component">
                                    <code>&lt;TabbedForm&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#default-values">Default Values</a>
                            </li>
                            <li class="chapter">
                                <a href="#validation">Validation</a>
                            </li>
                            <li class="chapter">
                                <a href="#submit-on-enter">Submit On Enter</a>
                            </li>
                            <li class="chapter">
                                <a href="#redirection-after-submission">Redirection After Submission</a>
                            </li>
                            <li class="chapter">
                                <a href="#toolbar">Toolbar</a>
                            </li>
                            <li class="chapter">
                                <a href="#customizing-input-container-styles">Customize Input Containers Styles</a>
                            </li>
                            <li class="chapter">
                                <a href="#displaying-fields-or-inputs-depending-on-the-user-permissions">User
                                    permissions</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Inputs.md' %}active{% endif %}">
                        <a href="./Inputs.html">
                            <b>10.</b>
                            <code>&lt;Input&gt;</code> Components
                        </a>
                        <ul class="articles" {% if page.path !='Inputs.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#arrayinput">
                                    <code>&lt;ArrayInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#autocompleteinput">
                                    <code>&lt;AutocompleteInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#autocompletearrayinput">
                                    <code>&lt;AutocompleteArrayInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#booleaninput-and-nullablebooleaninput">
                                    <code>&lt;BooleanInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#checkboxgroupinput">
                                    <code>&lt;CheckboxGroupInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#dateinput">
                                    <code>&lt;DateInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#datetimeinput">
                                    <code>&lt;DateTimeInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#disabledinput">
                                    <code>&lt;DisabledInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#fileinput">
                                    <code>&lt;FileInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#imageinput">
                                    <code>&lt;ImageInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#longtextinput">
                                    <code>&lt;LongTextInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#numberinput">
                                    <code>&lt;NumberInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#radiobuttongroupinput">
                                    <code>&lt;RadioButtonGroupInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#referenceinput">
                                    <code>&lt;ReferenceInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#referencearrayinput">
                                    <code>&lt;ReferenceArrayInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#richtextinput">
                                    <code>&lt;RichTextInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#selectinput">
                                    <code>&lt;SelectInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#selectarrayinput">
                                    <code>&lt;SelectArrayInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#textinput">
                                    <code>&lt;TextInput&gt;</code>
                                </a>
                            </li>
                            <li class="chapter">
                                <a href="#transforming-input-value-tofrom-record">Transforming Input</a>
                            </li>
                            <li class="chapter">
                                <a href="#third-party-components">Third-Party Components</a>
                            </li>
                            <li class="chapter">
                                <a href="#writing-your-own-input-component">Writing your own input component</a>
                            </li>
                            <li class="chapter">
                                <a href="#linking-two-inputs">Linking Two Inputs</a>
                            </li>
                            <li class="chapter">
                                <a href="#hiding-inputs-based-on-other-inputs">Hiding Inputs Based On Other Inputs</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Authentication.md' %}active{% endif %}">
                        <a href="./Authentication.html">
                            <b>11.</b> Authentication
                        </a>
                        <ul class="articles" {% if page.path !='Authentication.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#configuring-the-auth-provider">Configuring the Auth Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#sending-credentials-to-the-api">Sending Credentials to the API</a>
                            </li>
                            <li class="chapter">
                                <a href="#adding-a-logout-button">Adding a Logout Button</a>
                            </li>
                            <li class="chapter">
                                <a href="#catching-authentication-errors-on-the-api">Catching Authentication Errors On
                                    The API</a>
                            </li>
                            <li class="chapter">
                                <a href="#checking-credentials-during-navigation">Checking Credentials During
                                    Navigation</a>
                            </li>
                            <li class="chapter">
                                <a href="#customizing-the-login-and-logout-components">Customizing The Login and Logout
                                    Components</a>
                            </li>
                            <li class="chapter">
                                <a href="#restricting-access-to-a-custom-page">Restricting Access To A Custom Page</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Authorization.md' %}active{% endif %}">
                        <a href="./Authorization.html">
                            <b>12.</b> Authorization
                        </a>
                        <ul class="articles" {% if page.path !='Authorization.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#configuring-the-auth-provider">Configuring the Auth Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#restricting-access-to-resources-or-views">Restricting Access To Resources or
                                    Views</a>
                            </li>
                            <li class="chapter">
                                <a href="#restricting-access-to-fields-and-inputs">Restricting Access To Fields And
                                    Inputs</a>
                            </li>
                            <li class="chapter">
                                <a href="#restricting-access-to-content-in-custom-pages-or-menus">Restricting Access To
                                    Content In Custom Pages or Menus</a>
                            </li>
                        </ul>
                    </li>
                    <li class="chapter {% if page.path == 'Theming.md' %}active{% endif %}">
                        <a href="./Theming.html">
                            <b>13.</b> Theming
                        </a>
                        <ul class="articles" {% if page.path !='Theming.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#overriding-a-component-style">Overriding A Component Style</a>
                            </li>
                            <li class="chapter">
                                <a href="#conditional-formatting">Conditional Formatting</a>
                            </li>
                            <li class="chapter">
                                <a href="#responsive-utility">Responsive Utility</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-predefined-theme">Using a Predefined Theme</a>
                            </li>
                            <li class="chapter">
                                <a href="#writing-a-custom-theme">Writing a Custom Theme</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-layout">Using a Custom Layout</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-appbar">Using a Custom AppBar</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-menu">Using a Custom Menu</a>
                            </li>

                        </ul>
                    </li>

                    <li class="chapter {% if page.path == 'Actions.md' %}active{% endif %}">
                        <a href="./Actions.html">
                            <b>14.</b> Writing Actions
                        </a>
                        <ul class="articles" {% if page.path !='Actions.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#the-simple-way">The Simple Way</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-data-provider-instead-of-fetch">Using a Data Provider</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-action-creator">Using a Custom Action Creator</a>
                            </li>
                            <li class="chapter">
                                <a href="#handling-side-effects">Handling Side Effects</a>
                            </li>
                            <li class="chapter">
                                <a href="#success-and-failure-side-effects">Success and Failure Side Effects</a>
                            </li>
                            <li class="chapter">
                                <a href="#optimistic-rendering-and-undo">Optimistic Rendering and Undo</a>
                            </li>
                            <li class="chapter">
                                <a href="#altering-the-form-values-before-submitting">Altering the Form Values before
                                    Submitting</a>
                            </li>
                            <li class="chapter">
                                <a href="#custom-sagas">Custom Sagas</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-a-custom-reducer">Using a Custom Reducer</a>
                            </li>
                            <li class="chapter">
                                <a href="#list-bulk-actions">List Bulk Actions</a>
                            </li>
                        </ul>
                    </li>

                    <li class="chapter {% if page.path == 'Translation.md' %}active{% endif %}">
                        <a href="./Translation.html">
                            <b>15.</b> Translation
                        </a>
                        <ul class="articles" {% if page.path !='Translation.md' %}style="display:none" {% endif %}>
                            <li class="chapter">
                                <a href="#changing-locale">Changing Locale</a>
                            </li>
                            <li class="chapter">
                                <a href="#available-locales">Available Locales</a>
                            </li>
                            <li class="chapter">
                                <a href="#changing-locale-at-runtime">Changing Locale At Runtime</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-the-browser-locale">Using Browser Locale</a>
                            </li>
                            <li class="chapter">
                                <a href="#translation-messages">Translation Messages</a>
                            </li>
                            <li class="chapter">
                                <a href="#translating-resource-and-field-names">Translating Resource and Field names</a>
                            </li>
                            <li class="chapter">
                                <a href="#mixing-interface-and-domain-translations">Mixing Interface and Domain
                                    Translations</a>
                            </li>
                            <li class="chapter">
                                <a href="#translating-your-own-components">Translating Your Own Components</a>
                            </li>
                            <li class="chapter">
                                <a href="#using-specific-polyglot-features">Using Specific Polyglot Features</a>
                            </li>
                            <li class="chapter">
                                <a href="#notifications-with-variables">Notifications With Variables</a>
                            </li>
                        </ul>
                    </li>

                    <li class="chapter {% if page.path == 'CustomApp.md' %}active{% endif %}">
                        <a href="./CustomApp.html">
                            <b>16.</b> Including in Another App
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'Reference.md' %}active{% endif %}">
                        <a href="./Reference.html">
                            <b>17.</b> Reference
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'FAQ.md' %}active{% endif %}">
                        <a href="./FAQ.html">
                            <b>18.</b> FAQ
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'Ecosystem.md' %}active{% endif %}">
                        <a href="./Ecosystem.html">
                            <b>19.</b> Ecosystem
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'UnitTesting.md' %}active{% endif %}">
                        <a href="./UnitTesting.html">
                            <b>20.</b> Unit Testing
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'AdvancedTutorials.md' %}active{% endif %}">
                        <a href="./AdvancedTutorials.html">
                            <b>21.</b> Advanced tutorials
                        </a>
                    </li>

                    <li class="chapter {% if page.path == 'Labs.md' %}active{% endif %}">
                        <a href="./Labs.html">
                            <b>22.</b> Labs
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div id="book-body" class="book-body">
            <div class="body-inner">
                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-menu">
                        <button aria-label="Open menu" id="buttonToggleMenu">
                            <img src='./img/menu.svg' />
                        </button>
                    </div>
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    {{ content }}

                                </section>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'UA-46201426-1', 'auto');
            ga('send', 'pageview');
        </script>
        <script src="js/prism.js"></script>
        <script src="js/menu.js"></script>
</body>

</html>
